import React, { Component } from 'react';
import { observer } from "mobx-react";
import _ from 'lodash';
import moment from 'moment';
import Former, { validate } from '../../../components/Former';
import Button from '../../../components/Button';
import { relationType, rt1, rt2 } from '../../../common/baseData';
import { idCardRule, mobileRule } from "../../../utils/rules";

@observer
class Form extends Component {
  _validate = () => {
    validate((err, val) => {
      if (!err && _.isFunction(this.props.onSubmit)) {
        if (this.props.memberId) {
          val.customerFamilyMemberId = this.props.memberId;
        }
        val.customerId = this.props.customerId;
        this.props.onSubmit(val);
      }
    });
  };

  render() {
    const { currentMember = {} } = this.props.members;
    if (
      (this.props.memberId && _.isEmpty(currentMember)) ||
      (!_.isEmpty(currentMember) && currentMember.customerFamilyMemberId !== this.props.memberId)
    ) {
      return null;
    }
    const _rt = _.filter(
      relationType,
      ({ value }) => !_.includes(this.props.customer.customer.gender === 1 ? rt1 : rt2, value)
    );
    const fields = [
      {
        title: '必要信息',
        type: 'Title'
      },
      {
        label: '姓名',
        placeholder: '请输入客户姓名',
        type: 'TextInput',
        key: 'name',
        initialValue: currentMember.name,
        rules: [{ require: true }]
      },
      {
        label: '成员生日',
        placeholder: '请选择成员生日',
        type: 'Date',
        key: 'birthday',
        maxDate: moment().add(1, 'd').format('YYYY-MM-DD'),
        mode: 'date',
        rules: [{ require: true }],
        initialValue: currentMember.birthday || moment().format('YYYY-MM-DD')
      },
      {
        label: 'TA是客户的',
        placeholder: '请选择家人与客户的关系',
        type: 'Selecter',
        key: 'relationType',
        rules: [{ require: true }],
        initialValue: currentMember.relationType,
        options: _rt
      },
      {
        title: '完善信息',
        type: 'Title'
      },
      {
        label: '身份证号',
        placeholder: '请输入家庭成员身份证号',
        type: 'TextInput',
        key: 'idCardNo',
        initialValue: currentMember.idCardNo,
        rules: [
          {
            validation: (value, cb) => {
              if (value && !idCardRule(value)) {
                cb('身份证号格式不正确');
              } else {
                cb();
              }
            }
          }
        ]
      },
      {
        label: '手机号',
        placeholder: '请输入家庭成员手机号',
        type: 'TextInput',
        key: 'mobile',
        initialValue: currentMember.mobile,
        rules: [
          {
            validation: (value, cb) => {
              if (value && !mobileRule(value)) {
                cb('手机号格式不正确');
              } else {
                cb();
              }
            }
          }
        ]
      },
      {
        label: '有无社保',
        type: 'Bool',
        key: 'hasSocialSecurity',
        initialValue: currentMember.hasSocialSecurity
      }
    ];
    return (
      <Former
        fields={fields}
        bottom={
          <Button
            onPress={this._validate}
            type="primary"
            title="提交家庭成员资料"
          />
        }
      />
    );
  }
}
export default Form;
